// 导入 Vue
import Vue from "vue";
// 打开 debug
Vue.config.devtools = true;


// 根组件
import App from "./App.vue";
// 导入路由
import VueRouter from "vue-router";
// 安装路由
Vue.use(VueRouter);
// 自定义路由分发文件
import router from "./router.js";

/*
// 导入 mint-ui 组件库
// 按需导入
import {Header} from "mint-ui";
// 导入 Swipe（轮播图） 模块
import {Swipe,SwipeItem, Button} from "mint-ui";
import { Lazyload } from 'mint-ui';
// 导入mint-ui样式库
import "mint-ui/lib/style.css";
// 安装组件
Vue.component(Header.name, Header);
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
Vue.component(Button.name, Button);
Vue.use(Lazyload);
*/
import mintUi from "mint-ui";

Vue.use(mintUi);
import "mint-ui/lib/style.css";


// 导入 MUI (各个样式库中存在冲突问题)
import "./lib/mui-master/dist/css/mui.css";
// 导入 MUI 的扩展字体图标样式表
import "./lib/mui-master/examples/hello-mui/css/icons-extra.css";


// 导入bootsarp，主要使用内部的字体图标，mui提供字体图标不全
// import "bootstrap/dist/css/bootstrap.css";


// 导入 vue-resource
import VueResource from "vue-resource";
// 注册（安装 vue-resource）
Vue.use(VueResource);
Vue.http.options.root = 'http://localhost:8080';


import Vuejsonp from "vue-jsonp";

Vue.use(Vuejsonp);

// 图片缩略图查看器
import VuePreview from 'vue-preview'
// defalut install
Vue.use(VuePreview);
// Vue.use(VuePreview, {
//     mainClass: 'pswp--minimal--dark',
//     barsSize: {top: 100, bottom: 0},
//     captionEl: false,
//     fullscreenEl: false,
//     shareEl: false,
//     bgOpacity: 0.85,
//     tapToClose: true,
//     tapToToggleControls: false
// })

import Vuex from "vuex";

Vue.use(Vuex);

// 从本地持久化中获取购物车
let shopCart = JSON.parse(localStorage.getItem("shopCart") || "[]");
// let shopCart = localStorage.getItem("shopCart");

var store = new Vuex.Store({
    state: {
        // 购物车总共数量
        // numVal: 0,
        // 使用数组保存所有购物车项
        // shopCart:[]
        shopCart: shopCart
    },
    mutations: {
        // 更改购物车中总数量 shopItem: { shopId: 商品ID, shopNum: 更改后的数量 }
        updateShopNum(state, shopItem) {
            state.shopCart.some(item => {
                // console.log(item);
                // console.log(shopItem);
                if (item.id == shopItem.shopId) {
                    item.count = shopItem.shopNum;

                    // 更改商品数量完成后要重新将最新数据保存到本地持久化
                    localStorage.setItem("shopCart", JSON.stringify(state.shopCart));
                    return true;
                }
            })
        },

        // 将需要购买的商品项存到购物车里
        addCart(state, shopItem) {
            // flag

            // 单独保存购物车的总数量
            state.numVal += shopItem.count;
            var flag = false;
            state.shopCart.some(item => {
                // 如果需要加入的商品项购物车中已经存在，就不再添加，只需要增加购买数量即可
                if (item.id == shopItem.id) {
                    item.count += shopItem.count;

                    flag = true;
                    return true;
                }
            });


            // 如果购物车中没有这条商品项，则就添加到购物车中
            if (!flag) {
                state.shopCart.push(shopItem);
            }

            // 将最新的购物车保存到本地持久化中
            localStorage.setItem("shopCart", JSON.stringify(state.shopCart));

        },

        // 删除商品项
        removeShopItem(state,shopId) {
            state.shopCart.some((item, index) => {
                if (item.id == shopId) {
                    shopCart.splice(index, 1);
                    localStorage.setItem("shopCart",JSON.stringify(state.shopCart));
                    return true;
                }
            })
        },
        // 更改购物车的选中状态 shopItem: { shopId: 商品ID, selected: 勾选状态 }
        updateSelected(state, shopItem) {
            state.shopCart.forEach(item => {
                if (item.id == shopItem.shopId) {
                    item.selected = shopItem.selected;
                }
            });

            // 将更改后的商品信息保存到本地存储
            localStorage.setItem("shopCart", JSON.stringify(state.shopCart));
        }
    },
    getters: {
        // 获取加入购物车的商品数量
        getCount(state) {
            var count = 0;
            state.shopCart.forEach(item => {
                count += item.count
            });
            return count;
        },

        //获取加入购物车的商品ids
        getIds(state) {
            // 保存商品id集合
            var ids = [];
            state.shopCart.forEach(item => ids.push(item.id));
            return ids;
        },

        //分别获取每个商品加入购物车的数量
        getItemCount(state) {
            var o = {};
            state.shopCart.forEach(item => {
                o[item.id] = item.count
            });
            return o;
        },
        
        //分别获取每个商品对应的动态selected
        getItemSelected(state) {
            var o = {};
            state.shopCart.forEach(item => {
                o[item.id] = item.selected;
            });
            return o;
        },
        // 获取已勾选商品的总价
        getSelectedTotalPrice(state) {
            let totalPrice = 0;
            state.shopCart.forEach(item => {
                if (item.selected == true) {
                    totalPrice += item.price * item.count;
                }
            });
            return totalPrice;
        },
        // 获取已勾选商品的数量
        getSelectedNum(state) {
            let selectedNum = 0;
            state.shopCart.forEach(item => {
                if (item.selected == true) {
                    selectedNum++;
                }
            });
            return selectedNum;
        }
    }
});

// 导入 moment 日期格式化工具类
import moment from "moment";
// 全局配置日期过滤器
Vue.filter('formatDate', function (msg, pattern = 'YYYY-MM-DD HH:mm:ss') {
    // 使用moment工具类
    return moment(msg).format(pattern);

    // 传统格式化
    /*    var dt = new Date(msg);
        var y = dt.getFullYear();
        var m = dt.getMonth() + 1;
        var d = dt.getDay();
        var h = dt.getHours();
        var mm = dt.getMinutes();
        var s = dt.getSeconds();

        return `${y}-${m}-${d} ${h}:${mm}:${s}`*/
});


let vue = new Vue({
    el: "#app",
    render: e => e(App),
    router, //挂载路由
    store: store
});